html{
    width: 100%;
    height: 100%;
    padding: 0;
}

body{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

:root{
 --menu-icon-line-height: 8px;
 --menu-icon-line-space: 14px;
 --menu-icon-line-offsetY:calc(var(--menu-icon-line-height) + var(--menu-icon-line-space));
 --menu-icon-height:calc(var(--menu-icon-line-height)*3 + var(--menu-icon-line-space)*2);
 --cubic-bezier-in:cubic-bezier(0.3, 1, 0.7,1);
 --cubic-bezier-out:cubic-bezier(1, 0.7, 1, 0.3);
}

.frame{
    /* border:1px solid black; */
    height: 400px;
    width: 400px;
    border-radius: 2px;
    background-color: #3faf82;
    box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.3);
    content: #fff;

    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-icon{
    width: 80px;
    height: var(--menu-icon-height);
    cursor: pointer;
    z-index:50;


    .line-1,
    .line-2,
    .line-3{
        height: 8px;
        width: 100%;
        background-color: #fff;
        border-radius: 3px;
        box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
        transition: background-color .2s ease-in-out;
    }

    /* 动画 */
    .line-1{
        animation: animate-line-1-rev .7s ease-in-out;
    }

    .line-2{
        margin: 14px 0px;
        animation: animate-line-2-rev .7s ease-in-out;
    }

    .line-3{
        animation: animate-line-3-rev .7s ease-in-out;
    }

    &:hover{
        .line-1,
        .line-2,
        .line-3{
            background-color: #fff;
        }
    }
    
    &.active{
        .line-1,
        .line-2,
        .line-3{
            background-color: #fff;
        }
    
        .line-1{
            animation: animate-line-1 0.7s var(--cubic-bezier-in) forwards;
        }
    
        .line-2{
            animation: animate-line-2 0.7s var(--cubic-bezier-in) forwards;
        }
    
        .line-3{
            animation: animate-line-3 0.7s var(--cubic-bezier-in) forwards;
        }
    
    }
    
}


.no-animation {
    -webkit-animation: none !important;
    animation: none !important;
}

@keyframes animate-line-1 {

    0% {
        transform: translate3d(0,0,0) rotate(0deg);
    }
    50% {
        transform: translate3d(0, var(--menu-icon-line-offsetY), 0) rotate(0deg);
    }
    100% {
        transform: translate3d(0, var(--menu-icon-line-offsetY) ,0) rotate(45deg);
    }

}

@keyframes animate-line-2 {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(0);
        opacity: 0;
    }
    
}

@keyframes animate-line-3 {
    0% {
        transform: translate3d(0,0,0) rotate(0deg);
    }

    50% {
        transform: translate3d(0, calc(-1 * var(--menu-icon-line-offsetY)), 0) rotate(0deg);
    }

    100% {
        transform: translate3d(0, calc(-1 * var(--menu-icon-line-offsetY)), 0) rotate(135deg);
    }
    
}

@keyframes animate-line-1-rev {
    
    0% {
        transform: translate3d(0,  var(--menu-icon-line-offsetY) ,0) rotate(45deg);
    }

    50% {
        transform: translate3d(0,  var(--menu-icon-line-offsetY), 0) rotate(0deg);
    }
    100% {
        transform: translate3d(0,0,0) rotate(0deg);
    }


}

@keyframes animate-line-2-rev {

    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }

}

@keyframes animate-line-3-rev {
    0% {
        transform: translate3d(0, calc(-1 * var(--menu-icon-line-offsetY)), 0) rotate(135deg);
    }


    50% {
        transform: translate3d(0, calc(-1 * var(--menu-icon-line-offsetY)), 0) rotate(0deg);
    }

    100% {
        transform: translate3d(0,0,0) rotate(0deg);
    }

}

